<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,li{
            list-style: none;
        }
        #tbody{
            width: 80%;
            margin: 0 auto;
        }
        #tfoot{
            width: 80%;
            margin: 0 auto;
        }
        #box{
            width: 80%;
            /* height: 80%; */
            margin: 0 auto;
            margin-top: 10%;
            background-color: white;
            padding: 30px 11px 30px 11px;
        }
        .change{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top:0;
            left: 0;
        }
        .h1{
            font-size: 40px;
            margin-right: 10px;
            /* margin-bottom: 20px; */
        }
        .header{
            color: gray;
            font-size: 20px;
        }
        hr{
            margin-top: 15px;
            margin-bottom: 20px;
        }
        .ipt{
            width: 100%;
            height: 30px;
            background-color: rgba(243, 243, 243, 0.877);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 1px solid rgb(211, 211, 211);
            margin-bottom: 20px;
            line-height: 30px;
            /* display: flex; */
        }
        .ipt>div{
            float: left;
            width: 10%;
            height: 28px;
            margin: 0 auto;
            padding-left: 7px;
            padding-right: 7px;
        }
        .ipt input{
            float: right;
            width: 90%;
            height: 28px;
            border: none;
            border-top-right-radius: 5px;border-bottom-right-radius: 5px;
            padding-left: 15px;
            padding-right: 20px;
            border-left: 2px solid rgb(211, 211, 211);
        }
        .ipt .indiv{
            display: flex;
            justify-content: space-between;     
            flex-wrap: nowrap;
        }
        .btn1{
            width: 150px;
            height: 30px;
            margin-right: 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: none;
            background-color: rgb(95, 120, 194);
            color: white;
        }
        .btn2{
            width: 150px;
            height: 30px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 1px solid rgb(211, 211, 211);
            background-color: white;
            margin-bottom: 100px;
        }
        .bt3{
            float: right;
            margin-left: 10px;
        }
        table{
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border:1px solid #000;
        }
        .tbody{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="tbody">
        <span class="h1">表单</span>
        <span class="header">Subtext for header</span>
        <hr>
        <!-- 输入框部分 -->
        <div class="ipt"><div class="indiv"><span>姓</span><span>名</span></div><input type="text" placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间"></div>
        <div class="ipt"><div class="indiv"><span>联</span><span>系</span><span>电</span><span>话</span></div><input type="text" placeholder="如果格式有误输入框变红提示"></div>
        <div class="ipt"><div class="indiv"><span>学</span><span>历</span></div><input type="text" placeholder="如果校验正确，绿色表示通过"></div>
        <div class="ipt"><div class="indiv"><span>年</span><span>龄</span></div><input type="text" placeholder="请输入年龄"></div>
        <div class="ipt"><div class="indiv"><span>期</span><span>望</span><span>薪</span><span>资</span></div><input type="text" placeholder="请输入您的期望薪资"></div>
        <!-- 确认按钮 -->
        <button class="btn1">保存</button>
        <button class="btn2">重置</button>
    </div>
    <div id="tfoot">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>学历</td>
                    <td>年龄</td>
                    <td>期望薪资</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div class="change">
        <div id="box">
            <span class="h1">请修改信息</span>
            <hr>
            <div class="ipt" name="name"><div class="indiv"><span>姓</span><span>名</span></div><input type="text" placeholder="只能包含数字字母下划线，且数字不能开头，长度在8~16之间"></div>
            <div class="ipt" name="age"><div class="indiv"><span>联</span><span>系</span><span>电</span><span>话</span></div><input type="text" placeholder="如果格式有误输入框变红提示"></div>
            <div class="ipt" name="sex"><div class="indiv"><span>学</span><span>历</span></div><input type="text" placeholder="如果校验正确，绿色表示通过"></div>
            <div class="ipt" name="city"><div class="indiv"><span>年</span><span>龄</span></div><input type="text" placeholder="请输入年龄"></div>
            <div class="ipt" name="age"><div class="indiv"><span>期</span><span>望</span><span>薪</span><span>资</span></div><input type="text" placeholder="请输入您的期望薪资"></div>
            <button class="btn1 bt3">保存修改</button>
            <button class="btn2 bt4">关闭</button>
        </div>
    </div>
</body>
<script>
    const arr = [
        {id:1,name:'Steven',sex:'13701364084',record:'大学辍学',age:'45'},
        {id:2,name:'ZuckerBerg',sex:'13701364084',record:'哈佛大学博士',age:'45'},
        {id:3,name:'Bill.Gates',sex:'13701364084',record:'大学辍学',age:'45'},
    ];
    const oTbody = document.querySelector('tbody');
    const oAdd = document.querySelector('#tbody');
    const oBtnEnsure = oAdd.querySelectorAll('button')[0];
    const oBtnCancel = oAdd.querySelectorAll('button')[1];
    const oIptName = oAdd.querySelector('[name="name"]');
    const oIptAge = oAdd.querySelector('[name="age"]');
    const oIptSex = oAdd.querySelectorAll('[name="sex"]');
    const oSelCity = oAdd.querySelector('[name="city"]');
    const oChange = document.querySelector('.change');
    const oBtnEnsureChange = oChange.querySelectorAll('button')[0];
    const oBtnCancelChange = oChange.querySelectorAll('button')[1];
    const oIptNameChange = oChange.querySelector('[name="name"]');
    const oIptAgeChange = oChange.querySelector('[name="age"]');
    const oIptSexChange = oChange.querySelectorAll('[name="sex"]');
    const oSelCityChange = oChange.querySelector('[name="city"]');
    const oOptChange = oChange.querySelectorAll('option');


    
    let index ;


    setPage();

    oBtnEnsure.addEventListener('click' , function(){
       
        if( window.confirm('您确定要添加吗?') ){
            let name = oIptName.value ;
            let age = oIptAge.value - 0  ;
            let city = cityArr[oSelCity.value] ;

            let sex ; 
            for( let i = 0 ; i <= oIptSex.length-1 ; i++ ){
                if( oIptSex[i].checked ){
                    sex = oIptSex[i].value ;
                    break ;
                }  
            }
            let id = arr[arr.length-1].id + 1 ;

            arr.push( { id:id , name: name, sex:sex , age:age , city:city } )

            console.log( arr );

            setPage();
        }
    })

    oTbody.addEventListener('click' , function(e){
        if( e.target.getAttribute('name') === 'del' ){
            if( !window.confirm('您确定要删除吗?') ){
                return ; 
            }
            arr.splice( Number(e.target.getAttribute('index')) , 1 ); 

            setPage();

        }else if( e.target.getAttribute('name') === 'change' ){
        
            oChange.style.display = 'flex' ;

           
            index = Number( e.target.getAttribute('index') ) ;
            
           
            oIptNameChange.value = arr[index].name;
            oIptAgeChange.value = arr[index].age;
            for( let i = 0 ; i <= oIptSexChange.length-1 ; i++ ){
                
                if( oIptSexChange[i].value === arr[index].sex ){
                    oIptSexChange[i].checked = true; 
                    break ;
                }  
            }
            for( let i = 0 ; i <= oOptChange.length-1 ; i++ ){
                if( oOptChange[i].innerHTML === arr[index].city ){
                    oOptChange[i].selected = true ;
                }
            }
        }
    })
    oBtnEnsureChange.addEventListener('click' , function(){
        if( window.confirm('您确定要修改吗?') ){
            let name = oIptNameChange.value ;
            let age = oIptAgeChange.value - 0  ;

            let city = cityArr[oSelCityChange.value] ;

            let sex ; 
            for( let i = 0 ; i <= oIptSexChange.length-1 ; i++ ){
                if( oIptSexChange[i].checked ){
                    sex = oIptSexChange[i].value ;
                    break ;
                }  
            }

            arr[index].name = name;
            arr[index].age = age;
            arr[index].sex = sex;
            arr[index].city = city;

            setPage();

            oChange.style.display = 'none';

        }
    })

    oBtnCancelChange.addEventListener('click' , function(){
        oChange.style.display = 'none';
    })
    

    function setPage(){
        if( arr.length === 0 ){
            oTbody.innerHTML = '<tr><td colspan="7">没有匹配数据</td></tr>' ;
            return ;
        }


        let str = '' ; 
        arr.forEach(function(item,key){
            str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.sex}</td>
                    <td>${item.age}</td>
                    <td>${item.city}</td>
                    <td><button name="del" index="${key}">删除</button></td>
                    <td><button name="change" index="${key}">修改</button></td>
                </tr>
            `;
        })
        oTbody.innerHTML = str ;
    }

</script>

</html>